<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .image-container {
            display: inline-block;
            position: relative;
            /* 为了能看到盒子模型 */
            border-top: 5px solid red;
            /* 上边框 */
            border-right: 3px dotted green;
            /* 右边框 */
            border-bottom: 2px dashed blue;
            /* 下边框 */
            border-left: 4px solid yellow;
            /* 左边框 */
            padding: 10px 15px 20px 25px;
            /* 上下左右内边距 */
            margin: 30px 40px 50px 60px;
            /* 上下左右外边距 */
        }

        .image-container img {
            width: 300px;
            /* 图片宽度 */
            height: auto;
            /* 图片高度自动适应以保持比例 */
        }
    </style>
</head>

<body>
    <div class="image-container">
        <img src="images/盒子.jpg" alt="">
    </div>
</body>

</html>